<template>
  <div class="model-container">
    <div class="listName" >{{this.title}}</div>
    <!--表格-->
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <el-button type="primary" style="float: right" @click="black"  plain>返回</el-button>
        <div class="btns-wrapper-left">
          <el-button type="primary" size="mini" :disabled="PinButton" plain @click="addMember">添加车辆</el-button>
        </div>
      </div>
      <div class="table-wrapper">
        <el-table v-loading="!dataOption" :stripe="true" :data="dataOption" border empty-text="暂无数据" @selection-change="changeFun">

          <!--          <el-table-column align="center" type="selection" width="55"/>-->
          <el-table-column align="center" prop="ncId" label="编号"/>

          <el-table-column align="center" prop="licencePlate" label="车牌"/>

          <el-table-column align="center" prop="catName" label="车辆全称"/>

          <el-table-column align="center" prop="vinCode" label="vin码"/>

          <el-table-column align="center" prop="recentlyTime" label="最近养修"/>

          <el-table-column align="center" prop="serviceCycle" label="养修里程"/>

          <el-table-column align="center" prop="maintainNumber" label="养修次数"/>

          <el-table-column align="center" prop="revisedAmount" label="养修金额"/>

          <el-table-column align="center" prop="amountSettled" label="待结金额"/>

          <el-table-column align="center" label="操作" width="200px">
            <template slot-scope="scope">
              <el-button title="编辑车辆" type="primary" circle icon="el-icon-edit" class="table-icon" @click="edit(scope.row)"/>

              <el-button :disabled="PinButton" title="解绑" type="warning" circle icon="el-icon-delete" class="table-icon" @click="delById(scope.row)"/>

              <el-button v-if="scope.row.isBlacklist === 0" :disabled="PinButton" title="移入黑名单" type="primary" circle icon="el-icon-error" class="table-icon" @click="blackById(scope.row)"/>
              <el-button v-if="scope.row.isBlacklist === 1" :disabled="PinButton" title="移出黑名单" type="primary" circle icon="el-icon-success" class="table-icon" @click="whiteById(scope.row)"/>

<!--              <el-button v-if="scope.row.isBlacklist === 0" type="error" size="mini" plain @click="blackById(scope.row)">移入黑名单</el-button>-->

<!--              <el-button v-if="scope.row.isBlacklist === 1" type="success" size="mini" plain @click="whiteById(scope.row)">移入黑名单</el-button>-->
            </template>
          </el-table-column>

        </el-table>

        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="rowCount"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>
  </div>
</template>

<script>
  import * as member from '../../api/member'
  import * as userMessage from '../../utils/auth'
  import ImageCropper from '@/components/ImageCropper'
  import {isvalidNull, validatePhone} from "../../utils/validate";

  export default {
    components: {
      ImageCropper
    },
    data() {
      return {
        PinButton:false,
        button:'',
        searchShow: false,
        pageNo: 1,
        pageSize: 10,
        rowCount: null, // 总条数
        dialogState: false,
        dialogState1: false,
        // 按钮状态
        buttonState: false,
        // 列表数据
        dataOption: null,
        datavalID: [],
        // 提交内容
        type: '',
        startDatePicker: this.beginDate(),
        // 上传头像
        actionUrl: '',
        imagecropperShow: false,
        imagecropperKey: 0,
        picUrl: '',
        data:'',
        title:'客户车辆',
        moveBlack:'',
        moveWhite:'',
        nmId:''
      }
    },

    beforeMount() {
      member.selectNumberCatCount().then(rest=>{
      if(!this.$route.params.data){
        this.$router.push({
          path: '/login',
        })
      }else{
        this.data = this.$route.params.data
        console.log(this.data)

        this.title='客户车库'
        let url = this.data.nmId;
        const param = {
          current: this.pageNo,
          size: this.pageSize,
          url: url
        }
        var sys_user=JSON.parse(userMessage.getUserInformation());
        console.log(sys_user)
        if(!sys_user.neid||sys_user.neid==='1'){
          if(!sys_user.shopId){
            //平台
            if(sys_user.neid!=='1'){
              this.PinButton=true;
            }
          }else{
            //门店
          }
        }else{
          //企业
        }
        this.getList(param)
      }
      })
    },

    created() {
      this.initUploadFileurl()
    },
    methods: {
      getList(param){
        member.getmemberCat(param).then(res => {
          //console.log(res)
          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }
          // 初始话表格数据
          this.dataOption = res.data.data.records
          // 初始化分页数据
          this.rowCount = res.data.data.total
          this.pageSize = res.data.data.size
        })
      },
      beginDate() {
        const self = this
        return {
          disabledDate(time) {
            //alert(time.getTime()+"  "+new Date(self.dialogBindData.lastTime).getTime()+"   "+Date.now())
            return time.getTime()>Date.now();
          }
        }
      },
      initUploadFileurl() {
        this.actionUrl = process.env.BASE_API + 'file/uploadImageAndCrtThumbImagesRichEdit'
      },
      // 编辑
      edit(data) {
        this.$router.push({
          name: '/v1/membermessagecat',
          params: {
            data: data
          }
        })
      },
      //增加车辆
      addMember() {
        this.$router.push({
          name: '/v1/membermessagecat',
          params: {
            data: this.data
          }
        })
      },
      //加入黑名单
      blackById(data) {
        this.$confirm('确定将该车移至黑名单, 是否继续?', '提示', {
          confirmButtonText: '继续',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const param = {
            current: this.pageNo,
            size: this.pageSize,
            url: data.nmId
          }
          member.moveBlakc(data).then(res => {
            if (res.data.code === 1) {
              this.$message({
                message: '成功移入黑名单！',
                type: 'success'
              })
              this.getList(param)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '移入失败'
          })
        })
      },
      whiteById(data) {
        this.$confirm('将该车移出黑名单, 是否继续?', '提示', {
          confirmButtonText: '继续',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const param = {
            current: this.pageNo,
            size: this.pageSize,
            url: data.nmId
          }
          member.moveWhite(data).then(res => {
            if (res.data.code === 1) {
              this.$message({
                message: '成功移出黑名单！',
                type: 'success'
              })
              this.getList(param)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '移出失败'
          })
        })
      },
      // 删除
      delById(data) {
        this.$confirm('此操作将解除客户和该车的绑定, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delList(data)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取解绑除'
          })
        })
      },
      delList(data) {
        member.delMemberCat(data.ncId).then(res => {
          if (res.data.code === 1) {
            this.$message({
              message: '解绑成功',
              type: 'success'
            })
            const param = {
              current: this.pageNo,
              size: this.pageSize,
              url: data.nmId
            }
            this.getList(param)
          }
        })
      },
      changeFun(data) {
        this.datavalID = data
      },
      // 反显
      reBindData(data) {
        for (const key in this.dialogBindData) {
          this.dialogBindData[key] = data[key]
        }
      },
      // 搜索过滤
      searchData() {
        const arr = []
        for (const key in this.seacherParam) {
          if (this.seacherParam[key] !== '') {
            arr.push('&' + key + '=' + this.seacherParam[key])
          }
        }
        const url = arr.join('')
        return url
      },

      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pageNo = val
        this.getList()
      },
      handleClose() {
        for (const key in this.dialogBindData) {
          this.dialogBindData[key] = ''
        }
        this.type = ''
        this.dialogState = false
        this.dialogState1 = false
        this.$refs.dialogBindData.clearValidate()
      },
      // 上传头像
      cropSuccess(resData) {
        this.imagecropperShow = false
        this.imagecropperKey = this.imagecropperKey + 1
        this.picUrl = resData.data[0].maxImageUrl
      },
      close() {
        this.imagecropperShow = false
      },
      black(){
        this.$router.push({
          name: '/v1/memberlist',
        })
      },
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
  .uploadImg{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    /*border: 1px dashed #dcdfe6;*/
    img{
      display: block;
      border-radius: 50%;
      width: 100%;
      height: 100%;
    }
    .uploadImg_mock{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(0,0,0,0);
      transition:background-color 0.35s;
      -webkit-transition: background-color 0.35s;
      i{
        position: absolute;
        top: 50%;
        left: 50%;
        color: #fff;
        font-size: 26px;
        margin-left: -12px;
        margin-top: -16px;
        opacity: 0;
        transition:opacity 0.35s;
        -webkit-transition: opacity 0.35s;
      }
    }
    &:hover .uploadImg_mock{
      background-color: rgba(0,0,0,0.5);
      i{
        opacity: 1;
      }
    }
  }

</style>
